<template>
  <div class="vuu-page">
    <vuu-header></vuu-header>
    <div class="vuu-content-t">
      <vuu-pull ref="vuuPull" :id="'vuu-page-6'"  :options="options"   v-on:scrollBottom="scrollBottom">
        <div class="vuu-small-title">无限滚动</div>
        <template v-for="(item , index) in paneList">
          <vuu-pane :options="item"></vuu-pane>
        </template>
      </vuu-pull>
    </div>
  </div>
</template>
<script>
  import nav from '../components/navBar/nav-bar.vue'
  import pane from '../components/pane/pane.vue'
  import vuuPull from '../../src/pull.vue'
  let paneList = [
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动'
    }
  ]

  let paneList2 = [
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    },
    {
      w1: '无限滚动',
      w2: '无限滚动刷新的数据'
    }
  ]

  export default{
    name: 'page2',
    data(){
      return {
        paneList,
        paneList2,
        options:{

        }
      }
    },
    methods: {
     'scrollBottom'(){
        this.paneList = this.paneList.concat(this.paneList2)
     }
    },
    components: {
      'vuu-pull': vuuPull,
      'vuu-header': nav,
      'vuu-pane': pane
    }
  }
</script>
<style>

</style>
